<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/static/page/end/mainui.html">X-Admin</a></span>
                </transition>
            </div>
            <el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff" active-text-color="#ffd04b"
                     default-active="im"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <a href="/static/page/end/mainui.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href=`${item.path}` v-for="item in user.permission" :key="item.id">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.jobnum}}</span>
                        <el-dropdown>
                            <img :src=`/files/${user.avatar}`
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>
                <el-col :span="4">
                    <el-card style="width: 300px; height: 300px; margin-top: 10px;">
                        <div slot="header" class="clearfix">
                            <span>在线用户</span>
                        </div>
                        <div style="margin-bottom: 15px" v-for="item in users" :key="item.username">
                            <span>{{item.username}}</span>
                            <i class="el-icon-chat-dot-round"
                               style="margin-left: 10px; font-size: 16px; cursor: pointer"
                               @click="chat(item.username)"></i>
                            <span style="font-size: 12px;color: limegreen" v-if="item.username === chatUser.username">chatting...</span>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="20">
                    <div style="width: 800px; height: 750px; margin: 10px auto; border: 1px solid #aaa; background-color: white;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
                        <div style="text-align: center; font-size: 18px; line-height: 50px; border-bottom: 1px solid #ccc">
                            Web聊天室（{{chatUser.username}}）
                        </div>
                        <div style="height: 500px; border-bottom: 1px solid #aaa; overflow:auto" id="im-box">

                        </div>
                        <div style="height: 200px">
                        <textarea v-model="text"
                                  style="height: 160px; width: 100%; padding: 20px; border-bottom: 1px solid #ccc"></textarea>
                            <div style="text-align: right; padding-right: 10px">
                                <el-button type="primary" size="mini" @click="send">发送</el-button>
                            </div>
                        </div>
                    </div>
                </el-col>


            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>

<script>
    let socket;

    function openSocket() {
        let username = JSON.parse(sessionStorage.getItem("user")).username;
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            let socketUrl = "ws://localhost:9999/imserver/" + username;
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                let data = JSON.parse(msg.data)
                if (data.users) {
                    vm.$data.users = data.users ? data.users.filter(user => user.username !== username) : [];
                } else {
                    $("#im-box").append($("<div class=\"el-row\">" +
                        "<div class=\"el-col el-col-3\" style=\"padding: 10px; line-height: 50px; text-align: center;\">" +
                        "    <img src=\"/files/" + vm.$data.chatUser.avatar + "\" alt=\"\" style=\"width: 40px; height: 40px; border-radius: 50%;\">" +
                        "</div> " +
                        "<div class=\"el-col el-col-15\"><div class=\"tip left\">" + data.text + "</div></div>" +
                        "</div>"))
                }
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log("websocket发生了错误");
            }
        }
    }

    function sendMessage(username, text) {
        let userStr = sessionStorage.getItem("user");
        if (userStr) {
            let user = JSON.parse(userStr);
            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");
                let message = {from: user.username, to: username, text: text}
                socket.send(JSON.stringify(message));
            }
        }
    }

    let vm = new Vue({
        el: "#wrapper",
        data: {
            user: {},
            isCollapse: false,
            users: [],
            chatUser: {},
            text: ""
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            openSocket();
        },
        methods: {
            chat(username) {
                $.get("/user/detail/" + username).then(res => {
                    this.chatUser = res.data;
                })
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/user/logout");
                sessionStorage.removeItem("user");
                location.href = "../../index.html";
            },
            send() {
                let box = $("#im-box");
                if (!this.chatUser.username) {
                    this.$message({
                        type: 'warning',
                        message: "请选择聊天对象"
                    })
                    return;
                }
                if (!this.text) {
                    this.$message({
                        type: 'warning',
                        message: "请输入内容"
                    })
                } else {
                    box.append($("<div class='el-row'>\n" +
                        "                            <div class='el-col el-col-15 el-col-offset-6'>\n" +
                        "                                <div class=\"tip right\">" + this.text + "</div>\n" +
                        "                            </div>\n" +
                        "                            <div class='el-col el-col-3'>\n" +
                        "                               <div style='padding: 10px; line-height: 50px; text-align: center;'>" +
                        "                                <img style=\"width: 40px; height: 40px; border-radius: 50%\" src=\"/files/" + this.user.avatar + "\">\n" +
                        "                               </div>\n" +
                        "                            </div>\n" +
                        "                        </div>"))
                    sendMessage(this.chatUser.username, this.text);
                    this.text = '';
                }

            }
        }
    })
</script>
</body>
</html>
